<template>
    <block>
        <!--
  - Copyright (C) 2018-2019
  - All rights reserved, Designed By www.joolun.com
  - 注意：
  - 本软件为www.joolun.com开发研制，项目使用请保留此说明
-->
        <text v-if="day">{{ day }}天</text>
        <text v-if="hour">{{ hour }}小时</text>
        <text v-if="minute">{{ minute }}分</text>
        <text v-if="second">{{ second }}秒</text>
    </block>
</template>

<script>
export default {
    data() {
        return {
            day: null,
            hour: null,
            minute: null,
            second: null,
            timer: null
        };
    },
    props: {
        // 这里定义了innerText属性，属性值可以在组件使用时指定
        outTime: {
            type: Number,
            default: 0
        }
    },
    mounted: function () {
        this.CaculateDate();
    },
    destroyed: function () {
        if (this.timer) {
            clearInterval(this.timer);
        }
    },
    methods: {
        CaculateDate: function () {
            var that = this;
            var timerID = setInterval(function () {
                var leftTime = that.outTime - 1000;
                var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10);
                var hours = parseInt((leftTime / 1000 / 60 / 60) % 24, 10);
                var minutes = parseInt((leftTime / 1000 / 60) % 60, 10);
                var seconds = parseInt((leftTime / 1000) % 60, 10);

                if (leftTime > 0) {
                    that.setData({
                        outTimeClone: leftTime
                    });
                    that.setData({
                        day: days > 0 ? that.timeFormat(days) : null,
                        hour: hours > 0 ? that.timeFormat(hours) : null,
                        minute: minutes > 0 ? that.timeFormat(minutes) : null,
                        second: seconds > 0 ? that.timeFormat(seconds) : null
                    });
                } else {
                    //结束
                    clearInterval(that.timer);
                    setTimeout(function () {
                        that.$emit('countDownDone', {
                            detail: null
                        });
                    }, 2000);
                }
            }, 1000);
            this.setData({
                timer: timerID
            });
        },

        timeFormat(param) {
            //小于10的格式化函数
            return param < 10 ? '0' + param : param;
        }
    },
    watch: {
        outTime: {
            handler: function (newVal, oldVal) {
                this.outTimeClone = newVal;
            },

            immediate: true
        }
    }
};
</script>
<style></style>
